<template>
  <div class="total-wrap">
    <span class="item" v-for="item in totalList" :key="item.id" @click="switchAuditStatus(item.id)">
      <a-divider v-if="item.isDivider" type="vertical" />
      <div class="total-img-wrap">
        <img class="icon-img" :src="item.icon" alt="" />
      </div>
      <span class="ct" :class="{active : item.id === currentCheck}">{{ item.name }}</span>
      <span class="tx" :class="{active : item.id === currentCheck}">{{ item.value }}</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    result: Array,
    auditStatus: [String, Number] // 状态值
  },
  data() {
    return {
      currentCheck: '',
      totalList: [
        {
          name: '待审核',
          icon: '/static/auditing.png',
          id: '0',
          value: 0
        },
        {
          name: '审核通过',
          icon: '/static/pass.png',
          id: '1',
          value: 0,
          isDivider: true
        },
        {
          name: '审核不通过',
          icon: '/static/failed.png',
          id: '2',
          value: 0,
          isDivider: true
        }
      ]
    }
  },
  watch: {
    auditStatus: {
      handler(nVal) {
        this.currentCheck = nVal
      },
      deep: true,
      immediate: true
    },
    result: {
      handler() {
        this.dealResultTotal(this.result)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    switchAuditStatus(id) {
      this.$emit('change', id)
    },
    // 清空统计结果
    initPreResult() {
      this.totalList.forEach((item) => {
        item.value = 0
      })
    },
    dealResultTotal(result) {
      this.totalList.forEach(item => item.value = 0)
      result.forEach((item) => {
        const { auditStatus, auditCounts } = item
        const target = this.totalList.find((i) => i.id === auditStatus)
        target.value = auditCounts
      })
    }
  }
}
</script>
